<template>
  <div class="shipment-wrapper">
    <section class="section-title">
      <h3>Shiped  Items Preview</h3>
    </section>
    <section class="table-size">
      <div class="table-size-cnt">
        Table size
        <Radio-group v-model="tableSize" type="button">
          <Radio label="large">large</Radio>
          <Radio label="default">medium(default)</Radio>
          <Radio label="small">small</Radio>
        </Radio-group>
      </div>
    </section>
    <section class="data-list">
      <Table border no-data-text :size="tableSize" :loading="tableDataloading" ref="waitToConfirm" :columns="tableColumns" :data="createShipData" v-if="createShipData.length"></Table>
      <div v-show="notableDataTip">
        <Alert type="warning" class="no-data-alter">
          A warning prompt
          <template slot="desc">
            No data for wait to ship!!
          </template>
        </Alert>
      </div>
    </section>
    <ShipmentForm :shipmentList="createShipmentList" :shipmentForm="shipmentForm" :shipAction="shipAction"></ShipmentForm>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import ShipmentForm from '@/components/ShipmentForm.vue';
  export default {
  	name: 'WaitToShipCreateShipment',
    components: { ShipmentForm },
    data () {
  		return {
        shipAction: 'create',
        tableDataloading: true,
        notableDataTip: false,
        tableSize: 'default',
        confirmBtnDisable: true,
        shipmentForm: {
          fullfillment: '',
          supplierCourier: '',
          dispatchDate: '',
          ETA: '',
          tracking: '',
          shippingFee: '$0',
          invoice: '',
          invoiceDate: '',
          invoiceAttachment: [],
          notes: ''
        },
        createShipData: [],
        tableColumns: [
          {
            title: 'Tag',
            align: 'center',
            width: 90,
            fixed: 'left',
            key: 'tag'
          },
          {
            title: 'UPC',
            align: 'center',
            minWidth: 125,
            fixed: 'left',
            key: 'UPC'
          },
          {
            title: 'From PO',
            align: 'center',
            minWidth: 150,
            key: 'from_PO'
          },
          {
            title: 'Category',
            align: 'center',
            width: 160,
            key: 'category'
          },
          {
            title: 'Brand',
            align: 'center',
            minWidth: 130,
            key: 'brand'
          },
          {
            title: 'Product Code',
            width: 85,
            align: 'center',
            key: 'product_code'
          },
          {
            title: 'Product Name',
            minWidth: 185,
            key: 'product_name'
          },
          {
            title: 'Colour Code',
            width: 80,
            align: 'center',
            key: 'colour_code'
          },
          {
            title: 'Size',
            width: 65,
            align: 'center',
            key: 'size'
          },
          {
            title: 'Order QTY',
            width: 70,
            align: 'center',
            key: 'order_QTY'
          },
          {
            title: 'Exp. QTY',
            width: 70,
            align: 'center',
            key: 'Exp_QTY'
          },
          {
            title: 'Unit Price',
            align: 'center',
            width:110,
            key: 'unit_price'
          },
          {
            title: 'Discount',
            align: 'center',
            width:110,
            key: 'discount'
          },
          {
            title: 'Special Discount',
            align: 'center',
            minWidth:150,
            key: 'special_discount'
          },
          {
            title: 'Net Price',
            width: 90,
            align: 'center',
            key: 'net_price'
          },
          {
            title: 'Total Price',
            width: 100,
            align: 'center',
            key: 'total_price'
          }
        ]
      }
    },
    computed:{
      ...mapState([ 'createShipmentList', 'curWaitToShipData', 'importShipmentFormData'])
    },
    created () {
  		if (this.importShipmentFormData) {
  			this.shipmentForm = this.importShipmentFormData;
      }
  		this.initData();
  		console.log('createShipmentList', this.createShipmentList)
    },
    methods: {
  		initData () {
        let createShipmentListLen = this.createShipmentList.length;
        if (createShipmentListLen > 0) {
          this.tableDataloading = false;
          this.createShipData = this.createShipmentList;
          let orderQTY = 0, ExpQTY = 0, netPrice = 0, totalPrice = 0;
          let priceCurrencyUnit = this.createShipmentList[0].net_price.replace(/([1-9]\d*\.?\d*)|(0\.\d*[1-9])/ig, '');
          let alreadyHasTotalObj = this.createShipmentList.some(function (item) {
            return item.tag == 'Total';
          });
          if (alreadyHasTotalObj) {
          	return;
          }
          this.createShipmentList.forEach(item => {
            let orderQTYValue = parseInt(item.order_QTY), ExpQTYValue = parseInt(item.Exp_QTY);
          	let netPriceValue = parseFloat(item.net_price.replace(priceCurrencyUnit, ''));
          	let totalPriceValue = parseFloat(item.total_price.replace(priceCurrencyUnit, ''));
            orderQTY += orderQTYValue;
            ExpQTY += ExpQTYValue;
            netPrice += ( netPriceValue * 10e6);
            totalPrice += ( totalPriceValue * 10e6);
          });
          let totalObj = {
            tag: 'Total',
            order_QTY: orderQTY,
            Exp_QTY: ExpQTY,
            net_price: priceCurrencyUnit + netPrice / 10e6,
            total_price: priceCurrencyUnit + totalPrice / 10e6
          }
          this.createShipData[createShipmentListLen] = totalObj;
        } else {
        	this.notableDataTip = true;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
